<template>
  <div class="container">
    <h2 class="title">{{ encyclopedia.title }}</h2>
    <div class="content">
      <p class="text">{{ encyclopedia.content }}</p>
      <div class="stats">
        <p>阅读量：<span class="stat">{{ encyclopedia.read }}</span></p>
        <p>收藏量：<span class="stat">{{ encyclopedia.collect }}</span></p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { get } from '@/utils/request';
import { useRoute } from 'vue-router';

const route = useRoute();
const encyclopedia = ref({ title: '', content: '', read: 0, collect: 0 });

onMounted(() => {
  get('http://127.0.0.1:8000/index/petencydetail/?id=' + route.query.id)
    .then((result) => {
      if (result.data.code === 200) {
        encyclopedia.value = result.data.data;
      }
    })
    .catch((err) => {
      console.error("获取数据失败:", err);
    });
});
</script>

<style>
body {
  background: #f0f8ff; /* 背景色 */
  font-family: 'Arial', sans-serif; /* 字体 */
}

.container {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background-color: #ffffff; /* 内容背景 */
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.title {
  font-size: 28px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
}

.content {
  line-height: 1.6; /* 行间距 */
}

.text {
  font-size: 16px;
  color: #555; /* 内容颜色 */
  margin-bottom: 20px;
}

.stats {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #888; /* 统计信息颜色 */
}

.stat {
  font-weight: bold;
  color: #333; /* 统计数字颜色 */
}
</style>
